import { useState ,useEffect} from 'react';
import { useHistory } from 'react-router-dom';
import productApi from '../../api/product'
import { InputNumber, Card, Breadcrumb,Select, Input, Space, Button, Form } from "antd";
import { useNavs } from "../../hook/navs";
import tabsApi from '../../api/tabs'
const layout = {
  labelCol: {
    span:12,
  },
  wrapperCol: {
    span: 12,
  },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: '${label} 不能为空',
  types: {
    email: '${label} 不是有效的邮箱!',
    number: '${label} 不是有效的数字!',
  },
  number: {
    range: '${label}在${min}到${max}之间',
  },
};
const { Option } = Select;
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  const history = useHistory();
  const [{ rows }, { getAllNavs }] = useNavs();
  useEffect(() => {
    getAllNavs();
  }, [getAllNavs]);
  const [state, setState] = useState(true);
  const [data, setData] = useState({});
  const [tabs,setTabs]=useState([{_id: '61a47d7512c56a037c641830', navsId: '619d9b8674f55a1b0079f42d', name: '啤酒', __v: 0}])

  const onFinish = async ({ product }) => {
    const { navsId,tabsId, name, count, price, desc } = product;
    const newData = await productApi.add({ navsId,tabsId, name, count, price, desc });
    await setData(newData);
    setState(false)
  };
  const Upload = () => {
    const { _id } = data;
    history.push(`/info/upload/${_id}`);

  }
  
  const onGenderChange =async (value) => {
    // eslint-disable-next-line default-case
   const data=await tabsApi.getTabs(value)
   setTabs(data)
  };

  return (
    <div className="site-card-border-less-wrapper">
      <Space direction="vertical" style={{ width: "100%" }}>
        <Card>
          <Breadcrumb>
            <Breadcrumb.Item>主页</Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">商品</a>
            </Breadcrumb.Item>
            <Breadcrumb.Item>
              <a href="#/info/product">新增商品</a>
            </Breadcrumb.Item>
          </Breadcrumb>
        </Card>
        <Card>

          <Form
            style={{ width: "600px", marginLeft: "133px" }}
            {...layout} name="nest-messages" onFinish={onFinish}  validateMessages={validateMessages}>
            <Form.Item name={['product', 'name']} label="商品名称" rules={[{ required: true }]}>
              <Input placeholder="请输入商品名称" />
            </Form.Item>
            <Form.Item name={['product', 'navsId']}  label="商品大类" rules={[{ required: true }]}>
            <Select
            onChange={onGenderChange}
            placeholder="请选择商品大类"
            allowClear
          >
            {rows.map((item, index) => (
              <Option key={item._id} value={item._id}>
                {item.name}
              </Option>
            ))}
          </Select>
            </Form.Item>
            <Form.Item name={['product', 'tabsId']} label="商品小类" rules={[{ required: true }]}>
            <Select placeholder="请选择商品小类">
            {tabs.map((item, index) => (
              <Option key={item._id} value={item._id}>
                {item.name}
              </Option>
            ))}
            </Select>
          </Form.Item>
            <Form.Item
              name={['product', 'count']}
              label="商品库存"
              rules={[
                {
                  type: 'number',
                  required: true,
                  min: 0,
                  max: 999,
                },
              ]}
            >
              <InputNumber placeholder="请输入商品库存" style={{width:"300px"}}/>
            </Form.Item>
            <Form.Item
              name={['product', 'price']}
              label="商品价格"
              rules={[
                {
                  type: 'number',
                  required: true,
                  min: 0,
                  max: 999,
                },
              ]}
            >
              <InputNumber placeholder="请输入商品价格" style={{width:"300px"}}/>
            </Form.Item>

            <Form.Item name={['product', 'desc']} label="商品描述">
              <Input.TextArea />
            </Form.Item>
            <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 12 }}>
              <Button type="primary" htmlType="submit">
                新增
              </Button>
            </Form.Item>
          </Form>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <Button type="primary" disabled={state} style={{ marginRight: "180px" }} onClick={Upload}>上传图片</Button>
          </div>
        </Card>
      </Space>
    </div>


  );
};
